Semantische HTML

De betekenis van een zin in een taal is de semantiek van de zin. De betekenis van de zin kan pas blijken als we alle woorden van de zin hebben gelezen of gehoord, en de structuur van de zin tot ons is doorgedrongen. Een syntactisch correcte zin als: 'Geef de naam van de achtste dag van de week.' heeft geen betekenis en is dus semantisch gezien fout want een week heeft slechts zeven dagen.

Wat zijn semantische elementen?

Semantische html is geen nieuwe html-versie. Het legt enkel de nadruk op de overeenkomst tussen de naam van het element en de inhoud ervan. Aan de inhoud van de elementen wordt een betekenisvolle naam gegeven.

De naam van een semantisch element drukt duidelijk zijn betekenis uit, zowel voor de ontwikkelaar als voor de browser.

Voorbeelden hiervan zijn:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

De naam van die elementen geven duidelijk aan wat de inhoud ervan is.

Voorbeelden van niet-semantische elementen:

<div>
<span>

Bronnen

Online vind je verschillende hulpmiddelen om je te helpen bij het keizen van semantische html elementen. Een leuke site is The HTML5 Robot, Let the robot choose what semantic tag is right for your HTML5 element.

Laura Kalbag, Accessibility Through Semantic HTML, 15 December 2017

Waarom semantische html?

De voordelen van semantische html:

snellere laadtijd: omdat de code eenvoudiger is doordat enkel html elementen worden gebruikt en dus minder attributen om de inhoud in te delen is er minder dataverkeer;
betere toegankelijkheid: screenreaders en andere alternatieve browsers kunnen beter overweg met semantisch opgemaakte html-documenten omdat ze de 'betekenis' van de inhoud uit de tags kunnen afleiden;
mobiel: responsive design is stukken gemakkelijker met semantische elementen;
betere ranking: spiders kunnen semantische webpagina's beter en nauwkeuriger indexeren. Een spider ziet namelijk geen opmaak en is dan ook niet in staat daaruit het belang van woorden, zinnen of teksten te halen;
de vormgeving in CSS is nauwkeuriger en flexibeler;
HTML-code is eenvoudiger en overzichtelijk

Om ten volle te profiteren van de mogelijkheden van semantische HTML moet je de juiste denk- en werkwijze ontwikkelen.

Je kan verifiëren of een HTML document semantisch goed in elkaar steekt door de webpagina weer te geven 'zijn blootje', zonder opmaak. Alle inhoud wordt in zijn 'natuurlijke flow' getoond.

De belangrijkheid van bepaalde woorden, zinnen of blokken tekst springt er dan vanzelf uit want elementen krijgen een standaard opmaak mee: bijvoorbeeld een h1 is groter dan een h2. Het is ook een goede manier om te weten te komen hoe spiders naar je webpagina kijken.

En al ziet de pagina er saai en kaal uit, zal je snel merken als de semantiek fout zit. Dat is ook het advies van het W3C.

2017-12-17 18:11:41